<template>
  <el-row>
    <el-col class="el-col" :span="12" :offset="6">
      <header-com @add="add"></header-com>
      <hr />
      <!-- 将todoList 传入listcom 在item当中进行遍历 -->
      <list-com
        :todoList="todoList"
        :del="del"
        :changeFlag="changeFlag"
      ></list-com>
      <hr />
      <footer-com
        :all="todoList.length"
        :selectNum="selectNum"
        :allSelectIsOrNo="allSelectIsOrNo"
        :allSelectTodoList="allSelectTodoList"
        :selectAllDel="selectAllDel"
      ></footer-com>
    </el-col>
  </el-row>
  <is-xiang-ying></is-xiang-ying>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref, watch, computed } from "vue";
import FooterCom from "./components/FooterCom.vue";
import HeaderCom from "./components/HeaderCom.vue";
import ListCom from "./components/ListCom.vue";
import IsXiangYing from "./components/IsXiangYing.vue";

import { todo } from "./types/todo";
export default defineComponent({
  components: { HeaderCom, ListCom, FooterCom, IsXiangYing },
  setup() {
    // 数据在哪里，改变数据的方法在哪里
    const todoList = reactive<todo[]>([
      {
        id: 0,
        title: "吃饭",
        flag: false,
      },
      {
        id: 1,
        title: "睡觉",
        flag: false,
      },
      {
        id: 2,
        title: "打豆豆",
        flag: false,
      },
    ]);

    // 添加数据
    const add = (title: string) => {
      // todoList.push()
      // 给数组添加数据push unshift 这俩有什么区别
      todoList.push({
        id: todoList.length,
        title,
        flag: false,
      });
    };

    // 删除元素
    const del = (index: number) => {
      todoList.splice(index, 1);
    };

    // 处理选中不选中
    const changeFlag = (todo: todo, value: boolean) => {
      todo.flag = value;
      console.log(todoList);
    };

    // 选中有多少条  看todolist当中的对象当中的flag为true的有多少条
    // 首先要知道todolist当中flag为true的一直在变化
    const selectNum = ref<number>(0);
    watch(
      todoList,
      (value) => {
        console.log(value);
        // 目的数 todolist（value）当中flag为true的有多少
        // reduce累加器的用法
        selectNum.value = value.reduce((pre, item) => {
          return item.flag == true ? pre + 1 : pre;
        }, 0);
      },
      {
        deep: true,
        immediate: true,
      }
    );

    // 判断当前的todolist当中的flag
    // 只要能判断出来就将其传递给footer即可
    // selectNum选中的有多少条，  总条数 todoList.length
    // 当selectNum == todoList.length此时true 否则为false

    const allSelectIsOrNo = computed(() => {
      return selectNum.value == todoList.length ? true : false;
    });

    // 选中之后到底是true还是false
    const allSelectTodoList = (value: boolean) => {
      // 遍历操作
      todoList.forEach((item) => {
        item.flag = value;
      });
    };

    // 操作变成了 去todoList 当中查找所有为true 将其删除
    // filter 查找符合条件 为true元素  将符合条件的返回   删除没有
    //filter查找符合条件的 为false元素  最终留下了，  将todolist清空  将得到的为false的赋值给 todolist
    const selectAllDel = () => {
      const arr = todoList.filter((item) => {
        return item.flag == false;
      });
      // 清空数组
      // todoList = []  //错误不能使  因为todoList是一种proxy数组  []就是数组
      todoList.length = 0;
      // todoList.concat(arr);
      arr.forEach((item) => {
        todoList.push(item);
      });
    };

    return {
      todoList,
      add,
      del,
      changeFlag,
      selectNum,
      allSelectIsOrNo,
      allSelectTodoList,
      selectAllDel,
    };
  },
});
</script>

<style scoped>
.el-col {
  margin-top: 50px;
  border: 1px solid #ccc;
}
</style>